<style lang="scss" scoped></style>

<template>
  <div class="h-full bg-gray-50 overflow-y-auto" @scroll="handleScroll">
    <div class="h-24" v-for="item in 100">{{ item }}</div>
  </div>
</template>

<script lang="ts" setup>
function handleScroll(event: UIEvent) {
  const target = event.target as HTMLElement
  console.log((((target.scrollTop + target.clientHeight) / target.scrollHeight) * 100).toFixed(2) + '%')
}
</script>
